<template>
  <div class="contain">
    <div class="nav">
      详情信息
      <div class="f_btn" @click="$router.go(-1)">
        <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>
        <span>返回</span>
      </div>
    </div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" class="tabs">
      <el-tab-pane label="合同信息" name="first">
        <div class="total">
          <div class="title">
            <div>单项合同信息</div>
            <div v-show="ms_roleName == 'ProjectClerk'">
              <span @click="flag=!flag">{{flag?'编辑':'取消'}}</span>
              <span @click="save">保存</span>
            </div>
          </div>
          <div class="tables">
            <table cellpadding="0" cellspacing="0" border="1">
              <tr>
                <td>合同名称</td>
                <td>
                  <el-input v-model="form.conName" :disabled="flag"></el-input>
                </td>
                <td>内部合同编号</td>
                <td>
                  <el-input v-model="form.conInnerno" :disabled="flag"></el-input>
                </td>
              </tr>
              <tr>
                <!-- conId -->
                <td>所属框架合同编号</td>
                <td>
                  <el-input v-model="form.parentOuterno" :disabled="flag"></el-input>
                </td>

                <td>所属框架合同</td>
                <td>
                  <el-input v-model="form.parentId" :disabled="flag"></el-input>
                </td>
              </tr>

              <tr>
                <td>单项合同号</td>
                <td>
                  <el-input v-model="form.conOuterno" :disabled="flag"></el-input>
                </td>
                <td>合同金额(万元)</td>
                <td>
                  <el-input v-model="form.conMoney" :disabled="flag"></el-input>
                </td>
              </tr>
              <tr>
                <td>项目部</td>
                <td>
                  <el-select style="width: 100%;" v-model="form.belongOrg" :disabled="flag" placeholder="请选择项目部" clearable>
                    <el-option
                      v-for="(item, index) in list1"
                      :key="index"
                      :value="item.orgId"
                      :label="item.orgName"
                    ></el-option>
                  </el-select>
                </td>
                <td>签订时间</td>
                <td>
                  <el-date-picker
                    style="width:100%;"
                    v-model="form.signDate"
                    type="date"
                    placeholder="选择日期"
                    :disabled="flag"
                    clearable
                    value-format="timestamp"
                  ></el-date-picker>
                </td>
              </tr>
              <tr>
                <td>完工时间</td>
                <td>
                  <!-- <el-input v-model="form.finishDate" :disabled="flag"></el-input> -->
                  <el-date-picker
                    style="width: 100%;"
                    v-model="form.finishDate"
                    type="date"
                    placeholder="选择日期"
                    :disabled="flag"
                    clearable
                    value-format="timestamp"
                  ></el-date-picker>
                </td>
                <td>合同折扣价(万元)</td>
                <td>
                  <el-input v-model="form.countPrice" :disabled="flag"></el-input>
                </td>
              </tr>

              <tr>
                <td>甲方</td>
                <td>
                  <el-select style="width: 100%;" v-model="form.conPartya" :disabled="flag" placeholder="请选择甲方" clearable>
                    <el-option
                      v-for="(item, index) in list2"
                      :key="index"
                      :value="item.orgId"
                      :label="item.orgName"
                    ></el-option>
                  </el-select>
                </td>
                <td>降点数</td>
                <td>
                  <el-input v-model="form.conDroppoint" :disabled="flag"></el-input>
                </td>
              </tr>

              <tr>
                <td style="height:50px">查看文件</td>
                <td style="height:50px">
                  <a :href="LfileUrl" :download="LfileName" class="red" style="margin-left:10px;width:250px;display:block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{LfileName}}</a>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="项目清单" name="second" @click="second_frame">
        <div class="component-searchHeader">
          <div class="search-header">
            <div class="left-title">
              <p class="left-text">
                <span class="iconfont" style="font-weight:700">&#xe63d;</span>筛选查询
              </p>
              <div class="right">
                <button @click="currentPage=1;second_frame()">查询</button>
              </div>
            </div>
          </div>
        </div>
        <div class="component-search-box">
          <el-form :inline="true" :model="frameSearch" class="demo-form-inline">
            <el-form-item label="项目进度：">
              <el-select v-model="frameSearch.proProcess" placeholder="请选择项目进度" clearable>
                <el-option
                  v-for="(item, index) in proProcessList"
                  :key="index"
                  :value="item.orgId"
                  :label="item.orgName"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="批次号：">
              <el-select v-model="frameSearch.receptionNumber" placeholder="请选择批次号" clearable>
                <el-option
                  v-for="(item, index) in receptionNumberList"
                  :key="index"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>

        <div class="title">
          <div>项目信息</div>
          <div></div>
        </div>
        <div class="table">
          <el-table
            ref="multipleTable"
            :data="info"
            tooltip-effect="dark"
            style="width:100%"
            border
            :row-key="getRowKey"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" align="center" width="55" :reserve-selection="true"></el-table-column>
            <el-table-column label="批次号" align="center" prop="receptionNumber"></el-table-column>
            <el-table-column label="项目编号" align="center" prop="proNo"></el-table-column>
            <el-table-column label="项目名称" align="center" prop="proName"></el-table-column>
            <el-table-column label="项目进度" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.progress=='01'">未立项</div>
                <div v-if="scope.row.progress=='1'">审核中</div>
                <div v-if="scope.row.progress=='2'">未派单</div>
                <div v-if="scope.row.progress=='3'">未进场</div>
                <div v-if="scope.row.progress=='4'">施工中</div>
                <div v-if="scope.row.progress=='5'">已完工</div>
                <div v-if="scope.row.progress=='6'">审核中</div>
                <div v-if="scope.row.progress=='7'">验收</div>
                <div v-if="scope.row.progress=='71'">服开已归档</div>
                <div v-if="scope.row.progress=='72'">待交工</div>
                <div v-if="scope.row.progress=='73'">送审结算</div>
                <div v-if="scope.row.progress=='8'">竣工</div>
              </template>
            </el-table-column>
            <el-table-column label="项目金额(万元)" align="center" prop="endSettlement"></el-table-column>
            <el-table-column label="操作信息" align="center">
              <template slot-scope="scope">
                <a @click.prevent="detail(scope.row)" class="choose">查看详情</a>
               <!-- <a v-show="ms_roleName == 'ProjectClerk' && scope.row.conType== 3"
                  @click.prevent="hand_btn"
                  class="choose"
                >导出</a>-->
              </template>
            </el-table-column>
          </el-table>
        </div>


        <!-- 分页 -->
        <div class="component-paging" v-if="info.length > 0">
          <div class="table-bottom">
            <div class="bottom-left">
              <!--types == 3 && -->
              <button
                @click="dataLists"
                v-if="ms_roleName == 'ProjectClerk' && frameSearch.proProcess=='71' && frameSearch.receptionNumber!=''"
                style="width: 140px;"
              >批量生成发文资料</button>
            </div>
            <div class="paging">
              <div class="paging-left">
                <p>
                  共
                  <span>{{Math.ceil(total/pageSize)}}</span> 页/
                  <span>{{total}}</span> 条数据
                </p>
              </div>
              <el-pagination
                background
                @size-change="SizeChange($event,second_frame,currentPage,pageSize)"
                @current-change="CurrentChange($event,second_frame,currentPage,pageSize)"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30]"
                :page-size="pageSize"
                layout="sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <!--开票收款请款-->
      <el-tab-pane v-if="$route.query.conType==3" label="开票收款" name="third" @click="third_frame">
        <div style="margin-bottom: 20px;">
          <ul class="pro_gourp">
            <li v-for="(item,index) in prentList" :key="index">
              <span style="width:110px" v-if="item.payType==1">预付款进度：</span>
              <span style="width:110px" v-if="item.payType==2">进度款进度：</span>
              <span style="width:110px" v-if="item.payType==3">初验款进度：</span>
              <span style="width:110px" v-if="item.payType==4">终验款进度：</span>
              <div :style="item.value==0?'left:20px':(item.value/item.conditionValue>=1?'left:73%;':{left:(item.value/item.conditionValue)*73 + '%'})" class="tips">
                <div class="tips_arrow"></div>
                <div class="tips_text">
                  {{item.value || 0}}
                  <span v-if="item.conditionType=='Days'">日</span>
                  <span v-if="item.conditionType=='Score'">分</span>
                  <span v-if="item.conditionType=='FinishedRate'">%</span>
                </div>
              </div>
              <el-progress
                v-if="(item.value/item.conditionValue) >= 1"
                style="width:750px;display:inline-block;line-height:2;"
                :text-inside="true"
                :stroke-width="16"
                :percentage="100"
                color="#1abc9c"
              ></el-progress>
              <el-progress
                v-else
                style="width:750px;display:inline-block;line-height:2;"
                :text-inside="true"
                :stroke-width="16"
                :percentage="(parseFloat((item.value/item.conditionValue)).toFixed(2)) * 100 || 0"
                color="#1abc9c"
              ></el-progress>
              <div class="totalPro">
               {{item.conditionValue}}
                <span v-if="item.conditionType=='Days'">日 </span>
                <span v-if="item.conditionType=='Score'">分</span>
                <span v-if="item.conditionType=='FinishedRate'">%</span>
              </div>
              <button
                style="width:98px"
                v-if="item.conditionType=='Days'&&(item.conditionValue-item.value)<=7 && item.invId == null && ms_roleName=='ProjectManager'"
                @click="btns1(item.payType)"
              >开票请款</button>
              <button
                style="width:98px"
                v-if="item.conditionType!='Days'&&item.value>=item.conditionValue && item.invId == null && ms_roleName=='ProjectManager'"
                @click="btns1(item.payType)"
              >开票请款</button>
            </li>
          </ul>
        </div>
        <!--开票明细-->
        <div style="margin-bottom: 20px;">
          <div class="title">
            <div>开票明细</div>
            <div>
              <!--v-show="ms_roleName=='CenterFinanceManager'||ms_roleName=='CenterFinanceClerk'"-->
               <!--<span v-show="ms_roleName=='CenterFinanceManager'||ms_roleName=='CenterFinanceClerk'" @click="edit1" class="editbtn">添加到账</span>-->
            </div>
          </div>
          <div class="tables">
            <el-table tooltip-effect="dark" :data="deObj" border>
              <el-table-column label="合同编号" align="center" width="200" prop="outno"></el-table-column>
              <el-table-column label="合同名称" align="center" prop="conName"></el-table-column>
              <el-table-column label="收款明细" align="center" width="200" prop="source">
                <template slot-scope="scope">
                  <div v-if="scope.row.source==1">预付款</div>
                  <div v-if="scope.row.source==2">进度款</div>
                  <div v-if="scope.row.source==3">初验款</div>
                  <div v-if="scope.row.source==4">终验款</div>
                </template>
              </el-table-column>
              <el-table-column label="开票金额(万元)" align="center" width="200" prop="invmoney"></el-table-column>
              <el-table-column label="未到账金额(万元)" align="center" width="210" prop="waitPay"></el-table-column>
              <el-table-column label="操作" align="center" v-if="ms_roleName=='CenterFinanceManager'|| ms_roleName=='CenterFinanceClerk'">
                <template slot-scope="scope">
                  <span style="cursor: pointer;" @click="edit1(scope.row.invId,scope.row.arrId)" class="editbtn">添加到账</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <!--到账汇总-->
        <div style="margin-bottom: 20px;">
          <div class="title">
            <div style="float:left">到账汇总</div>
           <!-- <span
              class="f_btn"
              style="float:right"
              @click="ticketAdd=true"
              v-show="ms_roleName == 'CenterFinanceManager'"
            >添加</span>-->
          </div>

          <div class="tables">
            <el-table :data="arrive" tooltip-effect="dark" style border>
              <el-table-column label="批次" align="center" width="150" prop="batch">
                <!--<template slot-scope="scope">
                  <el-input size="small" v-model="scope.row.batch"></el-input>
                </template>-->
              </el-table-column>

              <el-table-column label="到账金额(万元)" align="center" width="150" prop="arrivalMoney">
               <!-- <template slot-scope="scope" align="center">
                  <el-input size="small" v-model="scope.row.arrivalMoney" align="center"></el-input>
                </template>-->
              </el-table-column>
              <el-table-column label="到账日期" align="center" width="150">
                <template slot-scope="scope">
                  {{scope.row.arrivalDate | timeFilter}}
                 <!-- <el-date-picker
                    v-model="scope.row.arrivalDate"
                    type="date"
                    placeholder="到账日期"
                    clearable
                    value-format="timestamp"
                  ></el-date-picker>-->
                </template>
              </el-table-column>
              <el-table-column label="发票扫描件" align="center" prop="fileName">
               <!-- <template slot-scope="scope">
                  <el-input size="small" v-model="scope.row.fileName"></el-input>
                </template>-->
              </el-table-column>
              <el-table-column label="开票日期" align="center" width="150">
                <template slot-scope="scope">
                  {{scope.row.openDate | timeFilter}}
                  <!--<el-date-picker
                    v-model="scope.row.openDate"
                    type="date"
                    placeholder="开票日期"
                    clearable
                    value-format="timestamp"
                  ></el-date-picker>-->
                </template>
              </el-table-column>
              <el-table-column label="发票号" align="center" width="100" prop="invNo">
               <!-- <template slot-scope="scope">
                  <el-input size="small" v-model="scope.row.invNo"></el-input>
                </template>-->
              </el-table-column>

              <el-table-column label="备注" align="center" width="100" prop="remark">
                <!--<template slot-scope="scope">
                  <el-input size="small" v-model="scope.row.remark"></el-input>
                </template>-->
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!--开票弹框-->
    <div class="component-model">
      <div class="lpper">
        <el-dialog title="开票请款" :visible.sync="ticket" width="950px" :before-close="handleBeforeClose">
          <div class="ticket_top">
            <div style="text-align:left;font-size:16px;">付款方信息：</div>
            <el-form
              :model="paySide"
              ref="paySide"
              :rules="rules"
              label-width="350px"
              style="width:600px;margin:20px auto;"
            >
              <el-form-item label="认证单位名称（一般纳税人税务登记证上的名称）：" prop="name" style="margin-bottom: 20px;">
                <el-select
                  v-model="paySide.name"
                  placeholder="请选择"
                  clearable
                  style="width:240px"
                  @change="changes"
                >
                  <el-option
                    v-for="(item, index) in list3"
                    :key="index"
                    :value="item.orgId"
                    :label="item.orgName"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="国税一般纳税人识别号（新：统一社会信用代码）：" prop="code" style="margin-bottom: 20px;">
                <el-input v-model="paySide.code" style="width:240px;"></el-input>
              </el-form-item>
              <el-form-item label="地址：" prop="addr" style="margin-bottom: 20px;">
                <el-input v-model="paySide.addr" style="width:240px;"></el-input>
              </el-form-item>
              <el-form-item label="电话：" prop="tel" style="margin-bottom: 20px;">
                <el-input v-model="paySide.tel" style="width:240px;"></el-input>
              </el-form-item>
              <el-form-item label="开户行：" prop="open" style="margin-bottom: 20px;">
                <el-input v-model="paySide.open" style="width:240px;"></el-input>
              </el-form-item>
              <el-form-item label="账号：" prop="accountNo" style="margin-bottom: 20px;">
                <el-input v-model="paySide.accountNo" style="width:240px;"></el-input>
              </el-form-item>
              <el-form-item label="发票类型：" prop="InvType" style="margin-bottom: 20px;">
                <el-select
                  v-model="paySide.InvType"
                  placeholder="请选择"
                  clearable
                  style="width:240px"
                  @change="changes"
                >
                  <el-option
                    v-for="(item, index) in InvTypes"
                    :key="index"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="备注：" prop="remark" style="margin-bottom: 20px;">
                <el-input v-model="paySide.remark" style="width:240px;"></el-input>
              </el-form-item>
              <div style="margin-left: -154px;">
                <div class="component-listHeader">
                  <div class="search-header">
                    <div class="left-title">
                      <p class="left-text">
                        <span class="iconfont">&#xe61e;</span>
                        开票信息
                      </p>
                      <div class="right">
                        <button @click.prevent="ticketAddInfo={};invMoney=0;ticketAdd=true">添加信息</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="table" style="width:900px;">
                  <el-table ref="multipleTable" :data="ticketInfo" tooltip-effect="dark" style border>
                    <el-table-column label="服务名称" align="center" width="120" prop="serviceName"></el-table-column>
                    <el-table-column label="计量单位" align="center" width="120" prop="unit"></el-table-column>
                    <el-table-column label="规格型号" align="center" width="120" prop="model"></el-table-column>
                    <el-table-column label="数量" align="center" width="120" prop="num"></el-table-column>
                    <el-table-column label="单价" align="center" width="120" prop="price"></el-table-column>
                    <el-table-column label="金额(万元)" align="center" width="120" prop="money"></el-table-column>
                    <el-table-column label="税率" align="center" prop="taxRate"></el-table-column>
                    <el-table-column label="操作" align="center">
                      <template slot-scope="scope">
                        <a @click="handleCheckDelete(scope.row,scope.$index)" type="text" size="small" class="red">删除</a>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <el-form-item style="margin-top: 20px;">
                <a style="padding: 10px 20px;border:1px solid #ccc;border-radius: 4px;" @click="resetForm('paySide')">取消</a>
                <a style="padding: 10px 20px;background: #1abc9c;border-radius: 4px;" @click="submitForm('paySide')">确定</a>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
      </div>
    </div>

    <!--添加信息弹框-->
    <div class="component-model">
      <el-dialog title="添加信息" :visible.sync="ticketAdd" width="500px">
        <div class="ticket_top">
          <el-form
            :model="ticketAddInfo"
            :rules="rules"
            ref="ruleForms"
            label-width="100px"
            style="width:350px;margin:20px auto;"
          >
            <el-form-item label="服务名称" prop="serviceName" style="margin-bottom: 20px;">
              <el-input v-model="ticketAddInfo.serviceName" style="width:240px;"></el-input>
            </el-form-item>
            <el-form-item label="计量单位" prop="unit" style="margin-bottom: 20px;">
              <el-input v-model="ticketAddInfo.unit" style="width:240px;"></el-input>
            </el-form-item>
            <el-form-item label="规格型号" prop="model" style="margin-bottom: 20px;">
              <el-input v-model="ticketAddInfo.model" style="width:240px;"></el-input>
            </el-form-item>
            <el-form-item label="数量" prop="num" style="margin-bottom: 20px;">
              <el-input type="number" v-model="ticketAddInfo.num" style="width:240px;"></el-input>
            </el-form-item>
            <el-form-item label="单价(万元)" prop="price" style="margin-bottom: 20px;">
              <el-input type="number" v-model="ticketAddInfo.price" style="width:240px;"></el-input>
            </el-form-item>
            <el-form-item label="金额(万元)" style="margin-bottom: 20px;">
              <div v-if="isNaN(ticketAddInfo.num) || isNaN(ticketAddInfo.price)" style="width:240px;"></div>
              <el-input v-else v-model="ticketAddInfo.money = ticketAddInfo.num * ticketAddInfo.price" disabled style="width:240px;"></el-input>
            </el-form-item>
            <el-form-item label="税率" prop="taxRate" style="margin-bottom: 20px;">
              <el-input v-model="ticketAddInfo.taxRate" style="width:240px;"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="ticketAdd = false;">重置</el-button>
          <el-button @click="submitForm1('ruleForms')">添加</el-button>
        </span>
      </el-dialog>
    </div>

    <!--导出弹框-->
    <div class="component-model">
      <el-dialog title="导出" :visible.sync="dialogVisible" width="600px">
        <div class="subFrame">
          <el-radio v-model="outPutRadio" label="1">虚拟合同</el-radio>
          <el-radio v-model="outPutRadio" label="2">分包合同</el-radio>
          <el-select clearable v-show="outPutRadio == '2'" v-model="lists" placeholder="请选择分包合同">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :value.sync="item.conId"
              :label.sync="item.conName"
              ref="bgcc"
            ></el-option>
          </el-select>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button @click="sure">确定</el-button>
        </span>
      </el-dialog>
    </div>

    <!--添加到账弹框-->
    <div class="component-model">
        <el-dialog class="baseModel baseModel1" title="添加信息" :visible.sync="moneyDetail" width="500px">
          <div>
            <el-form
              :model="moneyDetailInfo"
              ref="ruleForm"
              label-width="100px"
              style="width:350px;margin:20px auto;"
            >
              <el-form-item label="到账金额" prop="userName1">
                <el-input v-model="moneyDetailInfo.money"></el-input>
              </el-form-item>

              <el-form-item label="到账日期">
                <el-date-picker
                  style="width:250px;"
                  v-model="moneyDetailInfo.date"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="timestamp"
                ></el-date-picker>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="moneyDetail = false">重置</el-button>
            <el-button @click="addArriveAccount()">添加</el-button>
          </span>
        </el-dialog>
    </div>
  </div>
</template>

<script>
  import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item";
  export default {
    components: {ElFormItem},
    data() {
      return {
        ms_roleName: localStorage.getItem("roleName"),
        frameSearch:{
          proProcess:'',
          receptionNumber:''
        },
        invId:'',//开票合同id
        arrId:"",
        proProcessList:[{orgName:'验收',orgId:'7'},{orgName:'完工',orgId:'5'},{orgName:'服开已归档',orgId:'71'}],//项目进度
        receptionNumberList:[],//批次号列表
        ticketAdd: false, //添加弹窗的bool值
        // 虚拟合同id
        LfileUrl: "",
        LfileName: "",
        moneyDetail: false,
        falseId: "",
        falsenum: 0,
        subnum: 0,
        form: {
          //合同信息-单项合同信息
          parentid: ""
        },
        flag: true, //是否可编辑
        activeName: this.$route.query.activeTab || "first",
        info: [],
        multipleSelection: [], //全选
        lists: "",
        details: [
          {
            //开票明细
            num: "45662",
            name: "上海通信工程",
            pay: "456",
            money: "4566"
          }
        ],
        arrive: [],
        dialogVisible: false, //导出弹框是否显示
        options: [],
        value: "", //导出
        total: 0,
        // 每页显示数据的条数
        pageSize: 10,
        // 当前显示的页面页码
        currentPage: 1,
        // 开票明细
        // list1: [],
        obj: {},
        // 到账汇总
        obj3: {},
        aa: 0,
        bb: 0,
        cc: 0,
        dd: 0, //进度条百分比，后期根据后端数据在更改，现在展示用
        deObj: [],
        ticket: false, //开票请款弹框
        paySide: {
          name: "",
          code: "",
          addr: "",
          open: "",
          tel: "",
          accountNo: "",
          InvType:'',
        }, //开票弹窗的表单 - 付款人信息
        ticketAddInfo: {
          serviceName:"",
          unit:'',
          model:"",
          num:"",
          price:"",
          money:"",
          taxRate:""
        }, //添加弹窗的表单
        rules:{
          name: [
            { required: true, message: '请选择认证单位名称', trigger: 'change' }
          ],
          code: [
            { required: true, message: '请输入纳锐人识别号', trigger: 'blur' },
            { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
          ],
          addr: [
            { required: true, message: '请输入地址', trigger: 'blur' },
            { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
          ],
          tel: [
            { required: true, message: '请输入电话', trigger: 'blur' },
            { min: 1, max: 11, message: '长度在 1 到 11 个字符', trigger: 'blur' }
          ],
          open: [
            { required: true, message: '请输入开户行', trigger: 'blur' },
            { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
          ],
          accountNo: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
          ],
          InvType: [
            { required: true, message: '请选择发票类型', trigger: 'change' },
          ],
          remark: [
            { message: '请输入备注', trigger: 'blur' },
            { min: 1, max: 500, message: '长度在 1 到 500 个字符', trigger: 'blur' }
          ],
          serviceName: [
            { message: '请输入服务名称', trigger: 'blur' },
            { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' }
          ],
          unit: [
            { message: '请输入计量单位', trigger: 'blur' },
            { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' }
          ],
          model: [
            { message: '请输入规则型号', trigger: 'blur' },
            { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' }
          ],
          num: [
            { message: '请输入数量', trigger: 'blur' }
          ],
          price: [
            { message: '请输入单价', trigger: 'blur' }
          ],
          money: [
            { message: '请输入金额', trigger: 'blur' }
          ],
          taxRate: [
            { message: '请输入税率', trigger: 'blur' }
          ],
        },
        ticketInfo: [], //开票弹窗的table
        ticketAdd: false, //添加弹窗的bool值
        types: "",
        list1: [],
        list2: [],
        flags: "",
        openSource: "",
        list3: [],
        newArray: {},
        outPutRadio:'1',//导出框单选值
        prentList:[],//百分比
        isShowBtn:[true,true,true,true],
        moneyDetailInfo:{
          money:'',
          date:''
        },
        invMoney:0,//计算总金额
        baseUrl:img_url,
        InvTypes:[{name:'电子发票',id:'51'},{name:'增值税发票',id:'0'},{name:'普通发票',id:'2'}],
      };
    },
    created() {
      this.getList();
      this.getXmb();
      this.getJia();
    },
    mounted() {
      if(this.$route.query.activeTab){
        this.third_frame();//进度条函数
        this.third_info();//开票明细
        this.arriveCount();//到账收款
        this.getRenzheng();
      }
    },
    methods: {
      //删除一行
      handleCheckDelete(val,index){
        this.ticketInfo.splice(index,1);
      },
      //关闭前清除表单
      handleBeforeClose(){
        this.$refs['paySide'].resetFields();
        this.ticket = false;
      },
      //计算总金额
      totalMoneys(){
        let that = this;
        that.ticketInfo.forEach(function(value, index, array) {
          that.invMoney += parseFloat(value.money)
        });
        return that.invMoney
      },
        //批次号
      receptionNum(){
        let suCb = res => {
            this.receptionNumberList = res.data.data
            console.log(res.data)
        };
        let req = {
          url: "/api/web/proProject/selecReceptionNumber",
          methods: "post",
          data: {},
          success: suCb,
        };
        this.$https(req);
      },
      //点击取消开票请款
      resetForm(formName) {
        this.ticket = false;
        this.$refs[formName].resetFields();
      },
      //点击确定开票请款
      submitForm(formName){
        let that = this;
        that.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.ticketInfo.length>0){
              this.kticket();
              this.ticket = false;
            }else{
               this.$erMsg("请填写开票信息")
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      submitForm1(formName){
        if(this.ticketAddInfo.serviceName && this.ticketAddInfo.unit && this.ticketAddInfo.model && this.ticketAddInfo.num && this.ticketAddInfo.price && this.ticketAddInfo.money && this.ticketAddInfo.taxRate){
          this.addInfos();
          this.ticketAdd = false;
        }else{
            this.$erMsg("填写信息有空值")
        }
      },
      // 获取项目部的列表
      getXmb() {
        let that = this;
        let suCb = res => {
//        console.log('项目部信息：',res);
          that.list1 = res.data.data;
        };
        let req = {
          url: "/api/web/sysOrg/selectProjectOrg",
          methods: "post",
          data: {},
          success: suCb,

        };
        that.$https(req);
      },

      // 获取甲方列表
      getJia() {
        let that = this;
        let suCb = res => {
//        console.log('甲方信息:',res);
          this.list2 = res.data.data;
        };
        let req = {
          url: "/api/web/proContract/getPartya",
          methods: "post",
          data: {},
          success: suCb,

        };
        that.$https(req);
      },

      // 开票请款中添加信息按钮
      addInfos() {
        //  将填写的表单值赋值给表格
        this.ticketInfo.push(this.deepClone(this.ticketAddInfo));
      },

      // 开票请款的来源 标识
      btns1(id) {
        this.flags = id;
        this.ticketInfo = [];
        this.paySide.name="";
        this.paySide.code="";
        this.paySide.addr="";
        this.paySide.open="";
        this.paySide.tel="";
        this.paySide.accountNo="";
        this.paySide.InvType="";
//        this.paySide.remark="";

        this.ticketAddInfo.serviceName="";
        this.ticketAddInfo.unit="";
        this.ticketAddInfo.model="";
        this.ticketAddInfo.num="";
        this.ticketAddInfo.price="";
        this.ticketAddInfo.money="";
        this.ticketAddInfo.taxRate="";

        this.ticket=true;
      },

      // 获取认证列表
      getRenzheng() {
        let that = this;
        let params = {outType:'0'};
        let suCb = res => {
          that.list3 = res.data.data;
        };
        let req = {
          url: "/api/web/sysOrg/getOrgNamebyType",
          methods: "post",
          data: params,
          success: suCb,
        };
        that.$https(req);
      },

      changes() {
        this.newArray = this.list3.find(item => {
          if (item.orgId === this.paySide.name) {
            return item;
          }
        });
//      console.log(this.newArray);
      },

      // 调用开票请款确定按钮
      kticket() {
        let that = this;
        let params = {
          orgId: that.paySide.name, // 组织机构id
          orgName: that.newArray.orgName,
          invTaxno: that.paySide.code,
          address: that.paySide.addr,
          tele: that.paySide.tel,
          bankName: that.paySide.open,
          accountNo: that.paySide.accountNo,
          InvType:that.paySide.InvType,
          conId: that.$route.query.row, // 合同id
          invMoney: that.totalMoneys()+"", // 开票金额
          openSource:that.flags+"",
          invoice: that.ticketInfo
        };
        let suCb = res => {
          that.ticket = false;
          this.third_frame();
          console.log(that.flags)
          that.isShowBtn[that.flags-1] = false;
          console.log(that.isShowBtn)
          console.log( that.isShowBtn);
        };
        let req = {
          url: "/api/web/proInvoice/toInvoicePay",
          methods: "post",
          data: params,
          success: suCb,
        };
        that.$https(req);
      },
      //添加到账
      addArriveAccount(){
        let params = {
          arrivalMoney:this.moneyDetailInfo.money,
          arrivalDate:this.moneyDetailInfo.date+'',
          conId:this.$route.query.row,
          invId:this.invId,
          arrId:this.arrId||""
        };
        let suCb = res => {
          this.moneyDetail = false;
          this.third_info();
          this.arriveCount();
        };
        let req = {
          url: "/api/web/proInvoice/addProInvoiceArrival",
          methods: "post",
          data: params,
          success: suCb,
        };
        this.$https(req);
      },

      //  查看详情的方法 需要传入id
      // 判断 页面是否得到传到的 flg
      // 调用刚进来
      /*reaload() {
       // 拿到 穿过来的flg
       //  直接先展示开票请款
       if (this.$route.params.flg) {
       this.activeName = "third";
       }
       },*/

      // 获取合同信息列表
      getList() {
        let that = this;
        let params = {
          conId: that.$route.query.row
        };
        let suCb = res => {
          console.log('合同信息：',res);
          that.form = res.data.data.single;
          that.form.parentid = that.$route.query.row;
          that.form.countPrice = that.form.conMoney - that.form.conMoney * that.form.conDroppoint;
          that.LfileUrl =  res.data.data.files.length>0 ? img_url + res.data.data.files[0].fileUrl : '';
          that.LfileName = res.data.data.files.length>0 ? res.data.data.files[0].fileName : '';
        };
        let req = {
          url: "/api/web/proContract/viewDetails",
          methods: "post",
          data: params,
          success: suCb,

        };
        that.$https(req);
      },

      // 项目清单 请求列表
      second_frame() {
        let that = this;
        let suCb = res => {
//        console.log('项目清单',res);
          that.info = res.data.data.list;
          that.total = res.data.data.total;
          if(res.data.data.list.length>0){
            that.types = res.data.data.list[0].conType;
          }
        };
        let params = {
          conId: that.$route.query.row,//合同编号
          pn: that.currentPage + "", //传入的页数
          psize: that.pageSize + "",//显示的条数
          progress:that.frameSearch.proProcess,//项目进度（验收-7，完工-5，服开已归档-71）
          receptionNumber:that.frameSearch.receptionNumber,//批次号
        };
        console.log(params.conId);
        let req = {
          url: "/api/web/proProject/selectProDetals",
          methods: "post",
          data: params,
          success: suCb,
        };
        that.$https(req);
      },

      // 导出按钮
      hand_btn() {
        if (this.multipleSelection != undefined && this.multipleSelection.length >= 1) {
          this.dialogVisible = true;
          /*this.subList();
          this.false_btn();*/
        } else {
          this.$erMsg('请选择要导出的项目')
        }
      },
      //生成发文资料
      dataLists(){
        if(this.multipleSelection.length < this.total){
            this.$erMsg("还有项目未选中");
            return false;
        }
        let that = this,
          suCb = res => {
            console.log(res.data)
            let a = document.createElement("a");
            a.href = that.baseUrl + res.data.data.url;
            a.download = res.data.data.fileName;
            a.target = '_blank'
            a.click();
            that.$msg("生成成功");
          },
          req = {
            url: "/api/web/sysFile/toProcessDispatch",
            methods: "post",
            data: {
              proIds:this.multipleSelection
            },
            success: suCb,

          };
        that.$https(req);
      },
      getRowKey(row){
        return row.proId
      },
      //全选
      handleSelectionChange(val) {
        let arr = [];
        if (val.length > 0) {
          val.forEach(item => {
            arr.push(item.proId);
            this.multipleSelection = arr;
          });
        } else {
          this.multipleSelection = [];
        }
        console.log(this.multipleSelection)
      },

      // 分包合同请求
      subList() {
        let that = this,
          suCb = res => {
//        console.log("获取分包合同列表",res);
            that.options = res.data.list||[];
          },
          req = {
            url: "/api/web/proContract/getAllContract",
            methods: "post",
            data: {
              conType: ["5"],
              info: "",
              pageCurrent: 1,
              pageSize: 1000,
              signDate: "",
              parentId: this.$route.query.rows,
              conPartya: ""
            },
            success: suCb,

          };
        that.$https(req);
      },

      //  导出--查询虚拟合同id
      false_btn() {
        let that = this,
          suCb = res => {
//        console.log("虚拟合同id",res);
            that.falseId = res.data.list.legth > 0 ? res.data.list[0].conId : '';
          },
          req = {
            url: "/api/web/proContract/getAllContract",
            methods: "post",
            data: {
              conType: ["2"],
              info: "",
              pageCurrent: 1,
              pageSize: 10,
              signDate: "",
              parentId: this.$route.query.rows,
              conPartya: ""
            },
            success: suCb,

          };
        that.$https(req);
      },

      // 弹窗导出确定按钮
      sure() {
        let that = this,
          suCb = res => {
            this.dialogVisible = false;
            that.$msg("导出成功");
            that.second_frame();
          },
          req = {
            url: "/api/web/proProject/updateProParentIdByProList",
            methods: "post",
            data: {},
            success: suCb,

          };
        if (this.outPutRadio == "1") {
          req.data = {
            parentId: this.falseId,
            list: this.multipleSelection
          };
        } else{
          req.data = {
            parentId: this.lists,
            list: this.multipleSelection
          };
        }
        console.log(req.data);
        that.$https(req);
      },

      //项目清单-详情 - 跳转项目详情
      detail(row) {
        this.$router.push({
          name: "detailpro",
          params: {
            info: row.proId,
            tabs: "first"
          }
        });
      },
      // 保存按钮
      save() {
        let that = this,
          suCb = res => {
            that.flag = true;
            that.$msg('保存成功')
          },
          req = {
            url: "/api/web/proContract/updateContractDetail",
            methods: "post",
            data: {
              proContract: {
                conId: that.$route.query.row,
                conOuterno: that.form.conOuterno,
                conInnerno: that.form.conInnerno,
                conName: that.form.conName,
                conMoney: that.form.conMoney + "",
                conDroppoint: that.form.conDroppoint + "",
                conPartya: that.form.conPartya,
                signDate: that.form.signDate + "",
                finishDate: that.form.finishDate + "",
                belongOrg: that.form.belongOrg
              }
            },
            success: suCb,

          };
        if(!that.flag){
          that.$https(req);
        }else{
          that.$erMsg('先编辑，在保存')
        }
      },
       edit1(val,n) {
//         this.flag = false;
         this.invId = val;
         this.arrId = n;
         this.moneyDetail = true;
         this.moneyDetailInfo.money = '';
         this.moneyDetailInfo.date = ''
       },

      //tab切换
      handleClick(tab, event) {
        if (tab.name == "second") {
          this.second_frame();
          this.receptionNum();//批次号
          this.$nextTick(function () {
            this.$refs.multipleTable.clearSelection();
          })
        } else if (tab.name == "third") {
          this.third_frame();//进度条函数
          this.third_info();//开票明细
          this.arriveCount();//到账收款
          this.getRenzheng();
        } else {
          this.getList();
        }
      },

      // 开票收款
      third_frame() {
        let that = this;
        let suCb = res => {
          that.prentList = res.data.data;
          console.log(res.data.data);

          /*this.aa = res.data.data.prepay.finishRemind || 0;
           this.bb = res.data.data.prepay.prepayRemind || 0;
           this.cc = res.data.data.prepay.processRemind || 0;
           this.dd = res.data.data.prepay.qualityRemind || 0;

           if (res.data.data.prepay == null) {
           that.deObj = [];
           console.log(that.deObj, 11);
           } else {
           that.deObj.push(res.data.data.prepay);
           console.log(that.deObj, 22);
           }
           that.arrive = res.data.data.arrival;*/
        };
        let req = {
          url: "/api/web/proContract/getWaitPaymentContractDetail",
          methods: "post",
          data: {conId:this.$route.query.row},
          success: suCb,

        };
        that.$https(req);
        /*let params = {
         conId: this.$route.query.row
         };
         console.log(params.conId);

         let that = this;
         let suCb = res => {
         console.log(res.data.data.prepay);
         this.aa = res.data.data.prepay.finishRemind || 0;
         this.bb = res.data.data.prepay.prepayRemind || 0;
         this.cc = res.data.data.prepay.processRemind || 0;
         this.dd = res.data.data.prepay.qualityRemind || 0;

         if (res.data.data.prepay == null) {
         that.deObj = [];
         console.log(that.deObj, 11);
         } else {
         that.deObj.push(res.data.data.prepay);
         console.log(that.deObj, 22);
         }
         that.arrive = res.data.data.arrival;
         };
         let erCb = res => {
         console.log(res);
         };
         let req = {
         url: "/api/web/proContract/getProInvoiceCollection",
         methods: "post",
         data: params,
         success: suCb,

         };
         that.$https(req);*/
      },
      //开票明细
      third_info(){
        let that = this;
        let suCb = res => {
          that.deObj = res.data.data;
          console.log(res.data.data);
        };
        let req = {
          url: "/api/web/proContract/getWaitContractDetail",
          methods: "post",
          data: {conId:this.$route.query.row},
          success: suCb,

        };
        that.$https(req);
      },
      //到账汇总
      arriveCount(){
        let that = this;
        let suCb = res => {
          that.arrive = res.data.data;
          console.log(res.data.data);
        };
        let req = {
          url: "/api/web/proContract/getAccountInfo",
          methods: "post",
          data: {conId:this.$route.query.row},
          success: suCb,

        };
        that.$https(req);
      }


      //  得到 传过来的 数据 渲染页面
      /* getdetails() {
       console.log(this.$route.params.row);
       this.aa = this.$route.params.row.finishRemind * 100 || 0;
       this.bb = this.$route.params.row.prepayRemind * 100 || 0;
       this.cc = this.$route.params.row.processRemind * 100 || 0;
       this.dd = this.$route.params.row.qualityRemind * 100 || 0;
       console.log(this.aa);
       let params = {
       conId: this.$route.params.row.conId
       };
       let that = this;
       let suCb = res => {
       console.log(res);
       if (res.data.data.prepay == null) {
       that.deObj = [];
       console.log(that.deObj, 11);
       } else {
       that.deObj.push(res.data.data.prepay);
       console.log(that.deObj, 22);
       }
       };
       let erCb = res => {
       console.log(res);
       };
       let req = {
       url: "/api/web/proContract/getProInvoiceCollection",
       methods: "post",
       data: params,
       success: suCb,

       };
       that.$https(req);
       }*/
    }
  };
</script>
<style scoped>
  .component-searchHeader .search-header {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(228, 228, 228, 1);
    background-color: rgba(255, 255, 255, 1);
    margin: 20px auto 0;
  }

  .component-searchHeader .search-header .left-title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: rgba(243, 243, 243, 1);
    height: 45px;
    box-sizing: border-box;
  }

  .component-searchHeader .search-header .left-title .left-text {
    width: 20%;
    color: #666;
    line-height: 45px;
    font-family: "微软雅黑";
    font-weight: 400;
    font-size: 12px;
    text-align: left;
    margin: 0 0 0 30px;
  }

  .component-searchHeader .right {
    width: 70%;
    display: flex;
    justify-content: flex-end;
    margin-right: 30px;
  }

  .component-searchHeader .right button {
    padding: 0 25px;
    height: 30px;
    margin: 8px 5px;
    line-height: 30px;
    font-size: 14px;
    color: #666;
    background-color: #fff;
    border: 1px solid #ccc;
  }

  .component-searchHeader .right button:hover {
    background-color: #f3f3f3;
    cursor: pointer;
  }
  .component-search-box {
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    border-top: none;
    margin: 0 auto;
    text-align: left;
    padding-left: 30px;
    line-height: 60px;
    padding-top: 15px;
    margin-bottom: 30px;
  }
  .component-search-box .el-input__inner {
    height: 35px;
    display: inline-block;
  }
  .false_btn {
    width: 100px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #ccc;
    margin-bottom: 30px;
    border-radius: 5px;
    margin-left: 174px;
  }
  .false_btn:hover {
    /* background-color: #1ABC9C; */
    cursor: pointer;
    /* color: #fff; */
  }
  a {
    cursor: pointer;
  }
  .contain {
    box-sizing: border-box;
    width: 1100px;
    border: 1px solid #e4e4e4;
    margin: 20px auto;
  }
  .tabs {
    width: 1060px;
    margin: 20px;
    box-sizing: border-box;
  }
  .nav {
    background: #f8f8f8;
    height: 50px;
    font-size: 14px;
    line-height: 50px;
    border-bottom: 1px solid #e4e4e4;
    text-align: left;
    padding-left: 20px;
    font-size: 14px;
    color: #666;
  }
  .title {
    background: #f8f8f8;
    height: 50px;
    padding: 0 20px;
    font-size: 14px;
    border: 1px solid #e4e4e4;
    border-bottom: none;
  }
  .title > div:first-of-type {
    float: left;
    color: #666;
    line-height: 50px;
  }
  .title > div:last-of-type {
    float: right;
  }
  .title > div:last-of-type span {
    display: inline-block;
    margin-left: 20px;
    padding: 5px 20px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 4px;
  }
  .title > div:last-of-type span:first-of-type {
    border: 1px solid #e4e4e4;
    color: #666;
    background: #fff;
  }
  .title > div:last-of-type span:first-of-type:hover {
    border: 1px solid #1abc9c;
    color: #fff;
    background: #1abc9c;
  }
  .title > div:last-of-type span:last-of-type {
    /* border:1px solid #1ABC9C;
      color: #fff; */
    /* background: #1ABC9C; */
    border: 1px solid #e4e4e4;
    color: #666;
    background: #fff;
  }
  .title > div:last-of-type span:last-of-type:hover {
    border: 1px solid #1abc9c;
    color: #fff;
    background: #1abc9c;
  }
  .tables table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 12px;
  }
  .red {
    color: #48c9b0;
    font-size: 12px;
  }
  .tables table td:nth-of-type(2n) {
    text-align: left;
  }
  .tables table td:nth-of-type(2n + 1) {
    text-align: right;
    padding-right: 20px;
    width: 160px;
    background: #f9fafc;
  }
  .choose {
    color: #1abc9c;
    padding: 0 5px;
  }
  .component-paging .table-bottom {
    width: 100%;
  }
  .subFrame {
    overflow: hidden;
  }
  .subFrame span {
    display: inline-block;
    width: 100px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    border: 1px solid #e4e4e4;
    margin-right: 40px;
    border-radius: 4px;
  }
  .subFrame span:last-of-type {
    margin-right: 0;
  }

  /* 返回按钮 */

  .f_btn {
    display: inline-block;
    float: right;
    width: 80px;
    height: 30px;
    border: 1px solid #ccc;
    line-height: 30px;
    text-align: center;
    margin-top: 7px;
    margin-right: 10px;
  }
  .f_btn:hover {
    cursor: pointer;
    background-color: #f3f3f3;
  }
  /* 进度条 */

  .pro_gourp {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    flex-direction: column;
  }
  .pro_gourp li {
    display: flex;
    flex-wrap: nowrap;
    line-height: 35px;
    height: 35px;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 20px;
  }
  .pro_gourp li .tips {
    position: absolute;
    top: 30px;
    left: 100px;
  }

  .pro_gourp li .tips .tips_arrow {
    width: 0;
    height: 0;
    border-width: 0 5px 7px;
    border-style: solid;
    border-color: transparent transparent #1abc9c;
    margin: 0 auto;
  }

  .pro_gourp li .tips .tips_text {
    font-size: 12px;
    color: #606266;
    line-height: 16px;
    width: 200px;
    text-align: center;
  }

  .pro_gourp li .totalPro {
    width: 50px;
    font-size: 14px;
    color: #606266;
    text-align: right;
  }

  .pro_gourp li button {
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    transition: 0.1s;
    font-weight: 500;
    padding: 6.5px 20px;
    font-size: 14px;
    border-radius: 4px;
    margin-left: 20px;
  }

  .pro_gourp li button:hover {
    background: #1abc9c;
    border: 1px solid #1abc9c;
    color: #fff;
  }

  .component-listHeader .search-header {
    width: 900px;
    box-sizing: border-box;
    border: 1px solid rgba(228, 228, 228, 1);
    background-color: rgba(255, 255, 255, 1);

    border-bottom: 0;
  }

  .component-listHeader .search-header .left-title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: rgba(243, 243, 243, 1);
    height: 45px;
    box-sizing: border-box;
  }

  .component-listHeader .search-header .left-title .left-text {
    width: 20%;
    color: #666;
    font-family: "微软雅黑";
    font-weight: 400;
    font-size: 12px;
    line-height: 45px;
    text-align: left;
    margin: 0 0 0 30px;
  }

  .component-listHeader .search-header .right {
    width: 70%;
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
  }

  .component-listHeader .search-header .right button {
    padding: 0 15px;
    height: 30px;
    width: 100px;
    margin: 6px 5px;
    line-height: 30px;
    font-size: 14px;
    color: #666;
    background-color: #fff;
    border: 1px solid #ccc;
  }

  .component-listHeader .search-header .right button:hover {
    background-color: #f3f3f3;
  }

  .component-listHeader .search-header .right .right-select-margin {
    margin-top: 6px;
    margin-right: 8px;
  }
</style>
